<script setup>
const props = defineProps({
  longitude: {
    type: Number,
    required: true
  },
  latitude: {
    type: Number,
    required: true
  },
  resident: {
    type: String,
    required: true
  }
})

import { ref } from 'vue'
import { BaiduMap, BmCircle } from 'vue-baidu-map-3x'

const center = ref({ lng: props.longitude, lat: props.latitude })
</script>

<template>
  <baidu-map
    class="bm-view"
    :zoom="18"
    :center="{ lng: props.longitude, lat: props.latitude }"
  >
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
    <!-- 定位点 -->
    <bm-marker
      :position="{ lng: props.longitude, lat: props.latitude }"
      :dragging="true"
      animation="BMAP_ANIMATION_BOUNCE"
    >
      <bm-label
        class="label"
        :content="props.resident"
        :labelStyle="{
          backgroundColor: 'red',
          Color: 'white',
          fontSize: '20px',
          borderRadius: '5px'
        }"
        :offset="{ width: -35, height: 30 }"
      />
    </bm-marker>

    <!-- 圆形覆盖物 -->
    <bm-circle
      :center="center"
      :radius="150"
      :strokeColor="'blue'"
      :strokeWeight="2"
      :fillColor="'rgba(0, 0, 255, 0.1)'"
      :fillOpacity="0.5"
    />
  </baidu-map>
</template>

<style>
.bm-view {
  width: 100%;
  height: 600px;
}
</style>
